<template>
	<view class="index-box">
		<my-nav-bar v-show="navBarShow">
			<view class="tab-box">
				<view class="one-nav" :class="currentIndex === 0 ? 'nav-actived' : ''" @tap="swiperChange(0)">推荐
				</view>
				<view class="one-nav" :class="currentIndex === 1 ? 'nav-actived' : ''" @tap="swiperChange(1)">资讯
				</view>
			</view>
		</my-nav-bar>
		<view class="header-box">
			<!-- 顶部广告位轮播图 -->
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item v-for="item in swiperAdList" :key="item.id">
					<navigator open-type="navigate" :url="'/pages/webview/webview?url=' + item.data.link">
						<image class="banner-swiper-img" :src="item.data.image" mode="aspectFill" />
					</navigator>
				</swiper-item>
			</swiper>
			<!-- 遮罩使用弧形框 -->
			<image class="crile" src="@/static/crile.png" mode="aspectFill" />
			<!-- 两个选项按钮 -->
			<view class="card-header">
				<view class="card-one card-left" @tap="gotoPage('/pages/feeds/feeds')">
					<image class="img" src="@/static/coffee.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">精彩动态</view>
					</view>
				</view>
				<view class="card-one card-right" @tap="gotoPage('/pages/me/me')">
					<image class="img" src="@/static/ran.png" mode="aspectFill" />
					<view class="iright">
						<view class="title">个人中心</view>
					</view>
				</view>
			</view>

			<!-- Tab 选项卡 -->
			<view class="tabs-box">
				<view class="one-nav" :class="currentIndex === 0 ? 'nav-actived' : ''" @tap="swiperChange(0)">推荐
				</view>
				<view class="one-nav" :class="currentIndex === 1 ? 'nav-actived' : ''" @tap="swiperChange(1)">资讯
				</view>
			</view>

		</view>

		<view class="swiper-boxs">
			<swiper class="swiper-box" :style="'height:' + swiperSliderHeight" :current="currentIndex"
				@animationfinish="swiperSlider">
				<!-- 推荐动态实现 -->
				<swiper-item class="swiper-item">
					<view class="page-item sns-now">
						<view class="feeds-box">
							<my-water-fall v-model="feedsList" ref="waterfall">
								<template v-slot:left="{ leftList }">
									<view class="feed-one" v-for="(item, index) in leftList" :key="index">
										<navigator open-type="navigate" :url="'/subpages/feedInfo?id=' + item.id">
											<image class="feed-img" :src="item.cover" mode="widthFix"
												:lazy-load="true" />
											<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{
															item.feed_content
													}}</view>
											<view class="feed-info">
												<view class="iview">
													<image class="avatar" :src="item.avatar" />
													<text class="name u-line-1">{{ item.name }}</text>
												</view>
												<view class="iview">
													<view class="ilike" @tap.stop="clickLove(item)">
														<image v-if="item.has_like" src="@/static/lover.png"
															class="micon" />
														<image v-else src="@/static/love.png" class="micon" />
														<text class="love-count" v-if="item.like_count > 0">{{
																		item.like_count
																}}</text>
													</view>
												</view>
											</view>
										</navigator>
									</view>
								</template>
								<template v-slot:right="{ rightList }">
									<view class="feed-one" v-for="(item, index) in rightList" :key="index">
										<navigator open-type="navigate" :url="'/subpages/feedInfo?id=' + item.id">
											<image class="feed-img" :src="item.cover" mode="widthFix"
												:lazy-load="true" />
											<view class="u-line-2 feed-title" v-if="!!item.feed_content">{{
															item.feed_content
													}}</view>
											<view class="feed-info">
												<view class="iview">
													<image class="avatar" :src="item.avatar" />
													<text class="name u-line-1">{{ item.name }}</text>
												</view>
												<view class="iview">
													<view class="ilike" @tap.stop="clickLove(item)">
														<image v-if="item.has_like" src="@/static/lover.png"
															class="micon" />
														<image v-else src="@/static/love.png" class="micon" />
														<text class="love-count" v-if="item.like_count > 0">{{
																		item.like_count
																}}</text>
													</view>
												</view>
											</view>
										</navigator>
									</view>
								</template>
							</my-water-fall>
						</view>
					</view>
				</swiper-item>
				<!-- 资讯列表实现 -->
				<swiper-item class="swiper-item sns-news">
					<view v-for="(item, index) in newsList" :key="index">
						<navigator class="one-new" open-type="navigate" :url="'/subpages/newInfo?id=' + item.id">
							<view class="left">
								<view class="title u-line-2">{{ item.title }}</view>
								<view class="uinfo">
									<view class="iview">
										<view class="utime">
											<text class="name">{{ item.author }}</text>
										</view>
									</view>
									<text class="uptime">{{ item.created_at }}发布</text>
								</view>
							</view>
							<view class="right">
								<image class="pic" mode="aspectFill" :src="item.cover" />
							</view>
						</navigator>
					</view>
				</swiper-item>

			</swiper>
		</view>
	
		<!-- 分享按钮组件-->
		<goto-share/>
		<!-- 使用登录组件 -->
		<login ref="login" v-if="!loginState" />
	</view>

</template>

<script>
	import myWaterFall from '@/components/my-waterfall.vue'
	import {
		mapState
	} from 'vuex'
	import timeFrom from '@/tools/timeFrom.js'
	import feedMixin from '@/mixins/todoFeed.js'
	export default {
		// 混入的引入，点赞功能
		mixins: [feedMixin],
		data() {
			return {

				// 广告位列表
				swiperAdList: [],
				// 当前展示的页面
				currentIndex: 0,
				// 资讯列表
				newsList: [],
				// 动态列表
				feedsList: [],
				// 瀑布流计算出来的高度，
				swiperSliderHeight: '500',
				// 推荐动态轮播器高度
				swiperFeedsHeight: '',
				// 咨询页面轮播器高度
				swiperNewsHeight: '',
				// navBar的显示与隐藏
				navBarShow: false,
				// 设置列表的请求状态，为true则表示可以请求，false不能请求
				requestState:true,
				// 记录首页推荐所滚动的位置
				oldFeedsScrollTop: 0,
				// 记录资讯滚动的位置
				oldNewsScrollTop: 0
			}
		},
		// 通过使用mapState讲vuex中的loginState解构到当前页面中
		computed: {
			...mapState(['loginState']),
		},
		components: {
			myWaterFall,
		},
		// 自带的生命周期
		onPageScroll(event) {
			// 将当前页面的scrollTop值保存下来
			if (this.currentIndex === 0) {
				this.oldFeedsScrollTop = event.scrollTop;
			} else if (this.currentIndex === 1) {
				this.oldNewsScrollTop = event.scrollTop;
			}
			// 根据scrollTop来控制navBar的显示与否
			if (event.scrollTop >= 230) {
				this.navBarShow = true;
			} else {
				this.navBarShow = false;
			}
		},
		async onLoad() {
			console.log('this的登录状态为>',this.loginState?'登录':'未登录')
			// 用户登录
			uni.$on('indexUserLogin', () => {
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeeds()
			})
			uni.$on('indexUserLogout', () => {
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeeds()
			})

			// 发布新的动态后，触发数据更新,可以触发logout达到同样的效果
			uni.$on("indexFeedsUpdate", () => {
				this.currentSwiperIndex = 0
				this.feedsList = []
				this.$refs.waterfall.clear()
				this.getFeeds()
			})

			// 个人中心删除一条动态后，触发更新首页数据
			uni.$on("indexFeedRemove", fid => {
				this.$refs.waterfall.remove(fid);
			})

			// 用户点赞一条动态后触发数据更新
			uni.$on('indexFeedLoveChange', item => {
				this.$refs.waterfall.modify(item.id, "like_count", item.like_count);
				this.$refs.waterfall.modify(item.id, "has_like", item.has_like);
			})

			// 我们要在这里初始化请求相关数据
			this.getAds()
			this.getFeeds()
			this.getNews()
		},
		// 页面生命周期 下拉刷新
		onPullDownRefresh() {
			this.getAds();
			if (this.currentIndex === 0) {
				// 需要先清空waterFall 的内容
				// 调用waterfall自带的clear方法将其清空
				this.$refs.waterfall.clear();
				this.getFeeds();
			} else {
				this.getNews();
			}
		},
		// 页面生命周期，下拉置底请求新数据
		onReachBottom() {
			if (this.currentIndex === 0) {
				// 这里需要追加数据
				this.getFeeds();
			} else {
				this.getNews();
			}
		},
		methods: {
			// 页面标签 个人中心和动态中心的点击事件
			gotoPage(url) {
				uni.switchTab({
					// 使用es6进行简写
					url
				})
			},
			// 点击 后实现页面滑动，通过改变current的值
			swiperChange(pageIndex) {
				if (pageIndex === 0) {
					this.swiperSliderHeight = this.swiperFeedsHeight;
					// uniapp自带的事件，滚动事件
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.oldFeedsScrollTop
					})
				} else if (pageIndex === 1) {
					this.swiperSliderHeight = this.swiperNewsHeight;
					// uniapp自带的事件，滚动事件
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.oldNewsScrollTop
					})
				}
				this.currentIndex = pageIndex;
				// console.log(pageIndex)
			},
			// 推荐、资讯列表，滑动切换方法
			swiperSlider(event) {
				// console.log('event is ',event)
				// 当前页面的Index
				let index = event.detail.current;
				if (index === 0) {
					this.swiperSliderHeight = this.swiperFeedsHeight;
					// uniapp自带的事件，滚动事件
					// console.log('滑动时 oldFeedScrollTop=>' ,this.oldFeedsScrollTop)
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.oldFeedsScrollTop
					})
				} else {
					this.swiperSliderHeight = this.swiperNewsHeight;
					// console.log('滑动时 oldNewsScrollTop=>' ,this.oldNewsScrollTop)
					// uniapp自带的事件，滚动事件
					uni.pageScrollTo({
						duration: 0,
						scrollTop: this.oldNewsScrollTop
					})
				}
				this.currentIndex = index;
			},
			// 获取广告列表
			async getAds() {
				let res = await this.$u.api.getAdvert();
				this.swiperAdList = res.data;
				console.log('广告已获取')
				// console.log(res);
			},
			// 获取推荐动态列表
			async getFeeds() {
				// 为true则表示可以请求
			if(this.requestState) {
				this.requestState = false;
				uni.showToast({
					title: "请求中...",
					icon: "loading",
					duration: 2000,
				});
				let res = await this.$u.api.getFeeds();
				// 将后续的数据扩展到之前的数组中
				let feedList = res.data.feeds.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.images[0].file,
						avatar: !!item.user.avatar ? item.user.avatar.url : '/static/nopic.png',
						name: item.user.name
					}
				})
				// 将当前状态设置为可以请求
				this.requestState = true;
				this.feedsList = [...feedList, ...this.feedsList]
				uni.$on("getHeight", height => {
					// console.log('瀑布流计算出来的高度为:' + height);
					this.swiperFeedsHeight = height;
					this.swiperSliderHeight = height;
				})
			}
			uni.hideToast()
			},
			// 获取资讯列表
			async getNews() {
				let res = await this.$u.api.getNews();
				let newList = res.data.map(item => {
					return {
						...item,
						cover: this.BaseFileURL + item.image.id
					}
				})
				this.newsList = [...this.newsList, ...newList];
				this.swiperNewsHeight = (this.newsList.length * 95 + 100) + "px";
				this.swiperSliderHeight = this.swiperNewsHeight;
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 400upx;

		image {
			width: 750upx;
			height: 400upx;
		}
	}

	.tab-box {
		width: 750upx;
		display: flex;
		flex-direction: row;
		justify-content: center;

		.one-nav {
			height: 80upx;
			width: 110upx;
			color: #9B9B9B;
			font-size: 36upx;
			text-align: center;
			font-weight: blod;

			&.nav-actived {
				color: #0050FF;
			}
		}
	}

	// 首部轮播图以及下面的两个导航按钮
	.header-box {
		position: relative;
		left: 0;
		height: 500upx;
		background-color: #f1f1f1;
		z-index: 1;

		// 广告位轮播器相关样式
		.swiper {
			width: 750upx;
			height: 400upx;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;
			z-index: 1;

			.banner-swiper-img {
				width: 750upx;
				height: 400upx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
			}
		}

		.tabs-box {
			width: 750upx;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 480upx;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.one-nav {
				height: 80upx;
				width: 110upx;
				color: #9B9B9B;
				font-size: 36upx;
				text-align: center;
				font-weight: blod;

				&.nav-actived {
					color: #0050FF;
				}
			}

		}

		.crile {
			width: 750upx;
			height: 50upx;
			position: absolute;
			left: 0;
			top: 355upx;
			z-index: 9;
		}

		// 新鲜事 活动墙 按钮样式
		.card-header {
			position: absolute;
			left: 0;
			top: 320upx;
			height: 160upx;
			z-index: 99;
			width: 710upx;
			margin-left: 20upx;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;

			.card-one {
				width: 328upx;
				height: 96upx;
				border-radius: 49upx;
				background-color: #fff;
				margin: 0 10upx;
				box-shadow: 0 0 2px 0 rgb(188, 188, 188);
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;

				.img {
					width: 44upx;
					height: 44upx;
					margin-left: 50upx;
				}

				.iright {
					margin-left: 30upx;
					text-align: left;
					color: #888;

					.title {
						font-size: 30upx;
						color: #001432;
					}

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						font-size: 20upx;
						margin-top: -5upx;
					}
				}
			}
		}

		// 推荐、咨询 按钮样式

	}



	.swiper-box {
		background-color: #f1f1f1;
		padding: 60upx 0 40upx;
	}

	.sns-now {

		// 动态相关瀑布流样式
		.feeds-box {
			width: 735upx;
			margin-left: 13upx;
			padding-bottom: 20upx;

			.feed-one {
				width: 358upx;
				margin-bottom: 12upx;
				background-color: #FFF;
				border-radius: 20upx;

				position: relative;

				.feed-img {
					width: 358upx;
					height: 300upx;
					border-radius: 10upx;
				}

				.feed-title {
					width: 350upx;
					margin-top: 15upx;
					margin-left: 10upx;
					font-size: 28upx;
					line-height: 40upx;
					color: #001432;
					text-align: left;
				}

				.feed-info {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 10upx;
					font-size: 20upx;
					color: #666;
					padding: 0 10upx 16upx;

					.iview {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;

						.ilike {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
							align-items: center;
							align-content: center;
							height: 60upx;
							padding: 0 10upx;
							background-color: #FFFFFF;
						}
					}

					.avatar {
						margin-right: 10upx;
						height: 40upx;
						width: 40upx;
						border-radius: 50%;
						border: 1upx solid #eee;
					}

					.name {
						max-width: 120upx;
						color: #757474;
					}

					.micon {
						width: 32upx;
						height: 28upx;
					}

					.love-count {
						padding-left: 10upx;
						color: #757474;
					}
				}
			}
		}
	}

	// 轮播页面 资讯
	.sns-news {
		background-color: #fff;
		width: 750upx;

		.one-new {
			width: 700upx;
			height: 74px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: flex-start;
			align-content: center;
			padding-bottom: 10px;
			padding-top: 10px;
			padding-left: 25upx;
			padding-right: 25upx;
			border-bottom: 1px solid #f1f1f1;

			.left {
				width: 490upx;
				height: 140upx;
				text-align: left;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;

				.title {
					font-size: 30upx;
					line-height: 42upx;
					color: #001432;
					margin-top: 21upx;
				}

				.uinfo {
					width: 490upx;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: center;
					align-content: center;
					margin-top: 6upx;
					font-size: 20upx;
					color: #999;

					.utime {
						font-size: 24upx;

						.name {
							max-width: 120upx;
							color: #777;
						}
					}
				}
			}

			.right {
				width: 120upx;

				.pic {
					width: 120upx;
					height: 120upx;
					margin-top: 20upx;
					border-radius: 6upx;
				}
			}
		}
	}













	// .swiper-box {
	// 	background-color: #f1f1f1;
	// 	padding: 60upx 0 40upx;

	// 	.feeds-box {
	// 		width: 735upx;
	// 		column-gap: 10upx;
	// 		column-count: 2;
	// 		margin-left: 13upx;
	// 		padding-bottom: 20upx;

	// 		.feed-one {

	// 			.feed-img {
	// 				width: 100%;
	// 				border-radius: 10upx;
	// 			}

	// 			.feed-title {
	// 				width: 350upx;
	// 				margin-top: 15upx;
	// 				margin-left: 10upx;
	// 				font-size: 28upx;
	// 				line-height: 40upx;
	// 				color: #001432;
	// 				text-align: left;
	// 			}

	// 			.feed-info {
	// 				width: 358upx;
	// 				display: flex;
	// 				flex-direction: row;
	// 				flex-wrap: nowrap;
	// 				justify-content: space-between;
	// 				align-items: center;
	// 				align-content: center;
	// 				margin-top: 10upx;
	// 				font-size: 20upx;
	// 				color: #666;
	// 				padding: 0 10upx 16upx;

	// 				.ilike {
	// 					display: flex;
	// 					flex-direction: row;
	// 					flex-wrap: nowrap;
	// 					justify-content: space-between;
	// 					align-items: center;
	// 					align-content: center;
	// 					height: 60upx;
	// 					padding: 0 10upx;
	// 					background-color: #FFFFFF;

	// 				}

	// 				.avatar {
	// 					margin-right: 10upx;
	// 					height: 40upx;
	// 					width: 40upx;
	// 					border-radius: 50%;
	// 					border: 1upx solid #eee;
	// 				}

	// 				.name {
	// 					max-width: 120upx;
	// 					color: #757474;
	// 				}

	// 				.micon {
	// 					width: 32upx;
	// 					height: 28upx;
	// 				}

	// 				.love-count {
	// 					padding-left: 10upx;
	// 					color: #757474;
	// 				}
	// 			}
	// 		}


	// 	}

	// 	.news-box {
	// 		width: 100upx;
	// 		height: 200upx;

	// 		image {
	// 			width: 300upx;
	// 		}
	// 	}
	// }

	// // 资讯页面
	// .one-new {
	// 	width: 700upx;
	// 	height: 74px;
	// 	display: flex;
	// 	flex-direction: row;
	// 	flex-wrap: wrap;
	// 	justify-content: space-around;
	// 	align-items: flex-start;
	// 	align-content: center;
	// 	padding-bottom: 10px;
	// 	padding-top: 10px;
	// 	padding-left: 25upx;
	// 	padding-right: 25upx;
	// 	border-bottom: 1px solid #f1f1f1;

	// 	.left {
	// 		width: 490upx;
	// 		height: 140upx;
	// 		text-align: left;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: space-between;
	// 		align-items: flex-start;

	// 		.title {
	// 			font-size: 30upx;
	// 			line-height: 42upx;
	// 			color: #001432;
	// 			margin-top: 21upx;
	// 		}

	// 		.uinfo {
	// 			width: 490upx;
	// 			display: flex;
	// 			flex-direction: row;
	// 			flex-wrap: nowrap;
	// 			justify-content: space-between;
	// 			align-items: center;
	// 			align-content: center;
	// 			margin-top: 6upx;
	// 			font-size: 20upx;
	// 			color: #999;

	// 			.utime {
	// 				font-size: 24upx;

	// 				.name {
	// 					max-width: 120upx;
	// 					color: #777;
	// 				}
	// 			}
	// 		}
	// 	}

	// 	.right {
	// 		width: 120upx;

	// 		.pic {
	// 			width: 120upx;
	// 			height: 120upx;
	// 			margin-top: 20upx;
	// 			border-radius: 6upx;
	// 		}
	// 	}
	// }
</style>
